<template>
	<view class="content">
		<view>
			<image class="avatar" style="width: 129px" :src="imgurl + imgs" mode="widthFix"></image>
		</view>
		<view class="tit">{{ tit }}</view>
		<view style="padding-top: 34px;">
			<view class="flex" style="flex-direction: column;align-items: flex-start;width: 100%;">
				<view class="flex" >
					<image style="width: 16px;height: 16px;" src="/static/font/53.png" mode=""></image>
					<text style="font-size: 14px;font-weight: 500;color: #333333;line-height: 18px;padding-left: 12px;">手机号</text>
				</view>
				<u--input fontSize='16' v-model="phone" type='number' placeholder="请输入您的手机号" border="bottom" clearable>
				</u--input>
			</view>
			<view class="flex" style="flex-direction: column;align-items: flex-start;width: 100%;padding-top: 15px;">
				<view class="flex">
					<image style="width: 20px;height: 20px;" src="/static/font/56.png" mode=""></image>
					<text style="font-size: 14px;font-weight: 500;color: #333333;line-height: 18px;padding-left: 12px;">验证码</text>
				</view>
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input border="bottom" placeholder="请填写验证码" type='number' v-model="code">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input placeholder="请填写验证码" type='number' v-model="code">
				<!-- #endif -->
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>
			<view class="flex" style="flex-direction: column;align-items: flex-start;width: 100%;padding-top: 15px;">
				<view class="flex">
					<image style="width: 16px;height: 16px;" src="/static/font/55.png" mode=""></image>
					<text style="font-size: 14px;font-weight: 500;color: #333333;line-height: 18px;padding-left: 12px;">用户名</text>
				</view>
				<u--input fontSize='16' v-model="username" type='text' placeholder="请输入您的用户名" border="bottom" clearable>
				</u--input>
			</view>
			<view class="flex" style="flex-direction: column;align-items: flex-start;width: 100%;padding-top: 15px;">
				<view class="flex">
					<image style="width: 16px;height: 16px;" src="/static/font/52.png" mode=""></image>
					<text style="font-size: 14px;font-weight: 500;color: #333333;line-height: 18px;padding-left: 12px;">密码</text>
				</view>
				<u--input fontSize='16' v-model="password" type='password' placeholder="请设置密码" border="bottom" clearable>
				</u--input>
			</view>
			<view class="flex" style="flex-direction: column;align-items: flex-start;width: 100%;padding-top: 15px;">
				<view class="flex">
					<image style="width: 16px;height: 16px;" src="/static/font/54.png" mode=""></image>
					<text style="font-size: 14px;font-weight: 500;color: #333333;line-height: 18px;padding-left: 12px;">邀请码</text>
				</view>
				<u--input fontSize='16' v-model="invite_code" type='number' placeholder="请输入您的邀请码" border="bottom" clearable>
				</u--input>
			</view>
			<!-- <u--input fontSize='16' v-model="r_password" type='password' placeholder="重复密码" border="bottom"
				clearable></u--input> -->
			
			<view class="flex" style="margin-top: 10px;">
				<view style="font-size: 12px;color: #8E9090;">已有账号？</view>
				<view @click="login" style="font-size: 12px;color: #2447FF;">立即登录</view>
			</view>
			<view class="flex" @click="register"
				style="margin-top: 30px;justify-content: center;background-color: #2447FF;border-radius: 20px;height: 40px;font-size: 16px;color: #fff;">
				注册并关联
			</view>
			<view v-if="tabbar" class="flex" style="padding-top: 20px;">
				<u-checkbox-group shape='circle'>
					<u-checkbox :checked="true" @change="change" activeColor="#2447FF" v-model="checked"></u-checkbox>
				</u-checkbox-group>
				<view style="font-size: 14px;margin-left: 10px;">
					我已阅读并同意<text @click="nav(1)" style="color: #2447FF;">《用户协议》</text>＆ <text style="color: #2447FF;"
						@click="nav(2)">《隐私协议》</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				username: '',
				password: '',
				r_password: '',
				invite_code: '',
				tips: '',
				checked: true,
				imgs: '',
				wx_code: '',
				imgurl: config.imgurl,
				tabbar: true,
				windowHeight: ''
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});

			this.invite_code = e.invite_code
			// #ifdef H5
			let status = navigator.userAgent.toLowerCase();
			if (status.match(/MicroMessenger/i) == "micromessenger") {
				this.auth()
			} else {

			}
			// #endif

			this.att_img()
		},
		methods: {
			auth() {
				let d_url = window.location.href;
				let red_url = encodeURIComponent(d_url)
				this.wx_code = this.getUrlCode().code;
				let appid = 'wxf1322c2aa551e08c'
				if (this.wx_code == null || this.wx_code === '' || this.wx_code == undefined) {
					var wxUrl =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						appid +
						'&redirect_uri=' +
						red_url +
						'&response_type=code' +
						'&scope=snsapi_base' +
						'&state=STATE#wechat_redirect';
					window.location.href = wxUrl;
				} else {
					// let that = this;
					// uni.request({
					// 	url: that.purl + 'wechat.wechat/jingmo',
					// 	method: "POST",
					// 	header: {
					// 		token: ''
					// 	},
					// 	data: {
					// 		code: that.wx_code
					// 	},
					// 	success(res) {
					// 		console.log(res.data);
					// 		that.info = res.data.data
					// 		console.log(that.info);
					// 	},
					// 	complete(res) {
					// 		if (res.statusCode == 500) {
					// 	var url = window.location.href; //获取当前页面的url
					// 	if (url.indexOf("?") != -1) { //判断是否存在参数
					// 		url = url.replace(/(\?|#)[^'"]*/, ''); //去除参数
					// 		window.history.pushState({}, 0, url + '#/pages/me/reg_shanghu/reg_shanghu');
					// 		that.auth()
					// 	}
					// }
					// 	},
					// })
				}
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = window.location.href; //获取打开的公众号的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				} else {

				}
				return theRequest;
			},
			change(e) {
				this.checked = e

			},
			//注册
			async register() {
				if (!this.checked) {
					this.$tips('请先同意协议')
					return
				}
				let res = await this.$http.index.registers({
					mobile: this.phone,
					code: this.wx_code,
					mobilecode: this.code,
					username: this.username,
					password: this.password,
					invitecode: this.invite_code
				})
				if (res.code == 1) {
					this.$tips('注册成功')
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/home/follow?fl=reg'
						})
					}, 800)
					let token = res.data.userinfo.token
					uni.setStorageSync('token', token)
				} else {
					// #ifndef APP
					if (this.invite_code == '') {
						var url = window.location.href; //获取当前页面的url
						if (url.indexOf("?code") != -1) { //判断是否存在参数
							url = url.replace(/(\?code|#)[^'"]*/, ''); //去除参数
							window.history.pushState({}, 0, url + '#/pages/login/register');
							this.auth()
						}
					} else {
						var url = window.location.href; //获取当前页面的url
						if (url.indexOf("?code") != -1) { //判断是否存在参数
							url = url.replace(/(\?code|#)[^'"]*/, ''); //去除参数
							window.history.pushState({}, 0, url + '#/pages/login/register?invite_code=' + this.invite_code);
							this.auth()
						}
					}
					// #endif
					this.$tips(res.msg)
				}
			},
			async att_img() {
				let res = await this.$http.index.register({})
				this.imgs = res.data.data

			},
			nav(i) {
				switch (i) {
					case 1:
						uni.navigateTo({
							url: '/pages/me/agreement'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/me/privacy'
						})
						break;
				}
			},
			//登录
			login() {
				uni.navigateTo({
					url: 'login'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.phone == '') {
					this.$tips('请先输入手机号')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					let res = await this.$http.index.getcode({
						phone: this.phone,
						type: 'register',
					})
					if (res.code == 1) {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					} else {
						uni.$u.toast(res.msg);
					}

					// // 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},


		}
	}
</script>

<style scoped lang="scss">
	.content{
		background-image: url('@/static/font/57.png');
		background-repeat: no-repeat;
		background-size: cover;
		padding: 104px 30px 0px;
	}
	.flex {
		display: flex;
		align-items: center;
	}

	.u-input {
		padding: 30rpx 0px 12px !important;
		width: 100% !important;

	}

	.input-placeholder {
		font-size: 12px !important;
	}

	/deep/ .u-button--success {
		background-color: transparent !important;
		border: none !important;
		color: #2447FF !important;
		font-size: 16px !important;
	}

	/deep/ .u-button__text {
		font-size: 12px !important;
	}
</style>
